<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="../lib/vue.js"></script>

    <div id="app">
        <input type="button" value="按钮" v-bind:title="mytitle">
        <input type="button" value="按钮" :title="mytitle2">
        <input type="button" value="按钮" :title="mytitle2 + '这是加了自己的语法的'" v-on:click="show">
        <input type="button" value="按钮" :title="mytitle2 + '这是加了自己的语法的'" @click="show">
        <input type="button" value="按钮" :title="mytitle2 + '这是加了自己的语法的'" @mouseover="show">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                mytitle:"这是自定义属性title",
                mytitle2:"这是自定义属性title的另一种写法"
            },
            methods:{//这个methods属性定义了当前vue实例中的所有可用的方法
              show:function () {
                  alert("hello")
              }
            }

        })

    </script>
<p>1.v-bind会把表达式后面引号中当作变量处理，所以 还可以在引号中做加号，</p>
    <p>2.v-xxx这些指令都可以做加法。但是必须是双引号中 + 单引号的写法</p>
<p>mouseover鼠标覆盖事件</p>
    <p>v-on可以简写成@</p>
</body>
</html>